<template>
	<view class="content bg-img  padding-bottom " v-if="show">
		<u-navbar title="湮灭挖矿" background="rgba(0,0,0,0)" back-icon-color="#fff" title-color="#fff"></u-navbar>
		<view class="" style="height: calc(100vh - 80rpx);
		overflow: scroll;">
			<view class="head flex justify-center padding-top">
				<view class=" head flex justify-center padding-top">
					<image src="../../static/head.png" mode="scaleToFill" class="margin-right-xs"></image>
					<text>Preacher-PEC</text>
				</view>
			</view>
			<view class="flex justify-start padding-right margin-top-xl">
				<view class="box flex  justify-center align-center margin-left-xl ">
					<text
					    v-if='!data.fly'
						class="text-white block r flex align-center justify-center f16 margin-left-xl cuIcon-vip "
						style="background-color: #04BD9E; width: 100%; height: 40rpx; padding: 8rpx  8rpx;"
					>
						<text class="margin-left-xs">{{ data.level }}</text>
					</text>
					
					<view
					    v-else
						class="text-white block r flex align-center justify-center f16 margin-left-xl  "
						style="background-color: #04BD9E; width: 100%; height: 40rpx; padding: 8rpx  8rpx; "
					>	
						<image src="../../static/head.png" mode="aspectFill" style="width: 40rpx; height: 40rpx;"></image>
						
						<text class="margin-left-xs" style="vertical-align: middle;">{{ i18n.pec.i88 }}</text>
					</view>
					
					<text class="text-white margin-left-xs ">{{ addrr(uid) }}</text>
				</view>
			</view>
			<view class="response justify-center flex margin-top-xl">
				<view class="website text-center">
					<text class="f35 text-blue text-white">Community autonomy and PEC</text>
				</view>
			</view>
			<view class="margin-top-xl">
				<view class="flex flex-direction" style="padding: 0 100rpx;">
					<text class="f30 text-gray animation-slide-bottom" style="animation-delay: 0.1s;">{{ i18n.index.index2 }}：</text>
					<view class="flex align-center animation-slide-bottom"  style="animation-delay: 0.4s;" v-if=" data.openAddress">
						<text class="f20 text-white margin-top-xs ">{{ data.openAddress }}</text>
						<text style="white-space: nowrap;background: rgba(14, 16, 16, 0.44);padding: 5rpx;  color: #FFFFFF; " class="margin-left-xs  r" v-clipboard:copy="url"
									v-clipboard:success="copy"
									@click="dianji">{{ i18n.pec.i2 }}</text>
					</view>
				</view>
				<view class="flex flex-direction margin-top" style="padding: 0 100rpx;">
					<text class="f30 text-gray animation-slide-bottom" style="animation-delay: 0.7s;">{{ i18n.pec.i1 }}：</text>
					<view class="flex align-center animation-slide-bottom"  style="animation-delay: 1s;" v-if=" data.blackAddress ">
						<text class="f20 text-white margin-top-xs " >{{ data.blackAddress }}</text>
						<text style="white-space: nowrap;background: rgba(14, 16, 16, 0.44); padding: 5rpx; color: #FFFFFF; " class="margin-left-xs  r" v-clipboard:copy="url1"
									v-clipboard:success="copy1"
									@click="dianji1">{{ i18n.pec.i2 }}</text>
					</view>
				</view>
				<view class="flex  margin-top-xl justify-center align-center" style="padding: 0 100rpx; ">
						 <!-- <text class="f32 text-gray animation-slide-bottom" style="animation-delay: 1.3s;">{{ i18n.pec.i3 }}</text> -->
					<text class="f32 text-gray animation-slide-bottom" style="animation-delay: 1.3s;">{{ i18n.pec.i89 }} :</text>
					<text class="f32 text-white margin-top-xs animation-slide-bottom" style="animation-delay: 1.3s;">{{ data.delPec }}</text>
				</view>
			</view>
			
			<view class="flex justify-center base" style="margin: 100rpx;">
				<QSAnimation animationType="elasticity_Y" @click="jump">
					<view class="animation ">
						<view class="loader">
							<view class="face"><view class="circle"></view></view>
							<view class="face"><view class="circle"></view></view>
						</view>
					</view>
					<view class="qiyuan1 flex align-center flex-direction justify-center" style="color:#F0F0F0 ;">
						<!-- <text class="t1">{{ i18n.index.index4 }}</text>
						<text class="t2">{{ i18n.index.index5 }}</text>
						<text class="t3 margin-top-xs"></text>
						<text class="t4 margin-top-xs" v-if="!jiaData">{{ uu }}U : 1PE</text>
						<text class="t4 margin-top-xs" v-else>0.33U : 1PE</text> -->
						<text class="f60 ">{{ i18n.pec.i4 }}</text>
						<text class="f60 margin-top">{{ i18n.pec.i5 }}</text>
					</view>
				</QSAnimation>
			</view>
			<view class="margin-top-xl  sunburstBlock block flex justify-center padding-sm flex-direction" style="color: #E6E6E6;">
				<text class="f32 ">{{ i18n.pec.i6 }}</text>
				<text class="f60 block response text-center valueStyle">{{ redata.todayPec }}</text>
				<!-- <text class="f60 block response text-center valueStyle">0.00000000</text> -->
				<!-- <view class="flex justify-center">
					<u-count-to :start-val="30" :end-val="dlyBurstData" :duration="5000" :decimals="8" class="f30   text-center" color="#ffffff"></u-count-to>
				</view> -->
			</view>
			
			<view class="basicComputingPower ">
				<text class="f32" style="color: #F0F0F0;">{{ i18n.pec.i7 }}</text>
				<view class="flex wh100 align-center flex-direction justify-around">
					<QSAnimation @click="jumpp(2)"><image src="../../static/tuandui.png" mode="aspectFill" style="width: 110rpx; height: 110rpx;"></image></QSAnimation>
					<text class="f30" style="color: #FFFFFF;">Community autonomous</text>
					<text class="f28" style="color: #B3B3B3;">computing power mining</text>
				</view>
			</view>
			
			<view class=" f30" style="color: #F0F0F0; margin:  0  auto;  width: 702rpx; margin-top: 101rpx;">{{ i18n.pec.i8 }}</view>
			
			<view class="pec flex flex-direction align-center justify-center">
				<text>PEC</text>
				<text style="margin-top: 27px;">{{ data.pec ? data.pec : 0 }}</text>
			</view>
			
			<view class="f24" style="margin: 0 auto;margin-top: 55rpx; width: 668rpx; color: #999999; ">
				<text class="text-content">
					{{ i18n.pec.i9 }}
				</text>
			</view>
			
			
		
			<view class="computingPower">
				<text>{{ i18n.pec.i10 }}</text>
				<view class="flex f30 wh100 justify-around align-center " style="color: #E6E6E6;">
					<QSAnimation @click="jumpp(3)">
						<view class="flex flex-direction justify-around align-center">
							<text style="height: 70rpx;" class="flex align-center justify-center">
								{{ data.Ability ? addd(data.Ability ) : 0 }}
								<text style="color: rgb(73, 251, 221);" class="margin-left-xs text-bold">T</text>
							</text>
							<text class="bd">{{ i18n.pec.i11 }}</text>
						</view>
					</QSAnimation>
					<QSAnimation @click="jumpp(1)">
						<view class="flex flex-direction justify-around align-center">
							<text style="height: 70rpx;" class="flex justify-center align-center">
								{{ data.dynamic_ability ?  addd( data.dynamic_ability)  : 0 }}
								<text style="color: rgb(73, 251, 221);" class="margin-left-xs text-bold">T</text></text>
							</text>
							<text class="bd">{{ i18n.pec.i12 }}</text>
						</view>
					</QSAnimation>
				</view>
			</view>
			
			<view class="rankingComputingPower">
				<view class="flex  justify-between f30" style="color: #E6E6E6;">
					<text>{{ i18n.pec.i13 }}</text>
					<text>{{ i18n.pec.i14 }} : {{data.monthPec}}</text>
					<text>
						{{ m }}{{ i18n.pec.i15 }}
						<text class="cuIcon-tag margin-left-xs"></text>
					</text>
				</view>
				<view class="wh100 f30 margin-top-xl" style="color: #CCCCCC;">
					<view class="flex text-center">
						<text class="f-1">{{ i18n.pec.i16 }}</text>
						<text class="f-1">{{ i18n.pec.i17 }}</text>
					</view>
				</view>
				<view class="w100 f30 margin-top-xl "  style="width: 100%; height: 200rpx; overflow: scroll; color: #999999;">
					
					<swiper   :interval="3000" :duration="1000" autoplay circular  vertical style="height: 200rpx;"  >
						<block v-for="(item,index) in data.ranking" :key="index">
							<swiper-item style="height: 200rpx;" >
								<block v-for="(item1,index1) in item" :key="index1" style="display: flex; flex-direction: column;">
									<view class="flex text-center margin-bottom ">
										<text class="f-1 ">{{ addrr(item1.address) }}</text>
										<text class="f-1 ">{{ item1.ability }}<text style="color: rgb(73, 251, 221);" class="margin-left-xs">T</text></text>
									</view>
								</block>
							</swiper-item>
						</block>
					</swiper>
					
					
					
					
				
				</view>
			
			</view>
			
			<w-loading :text="i18n.pec.i18 " mask="true" click="true" ref="loading"></w-loading>
		</view>
	</view>
</template>

<script>
import QSAnimation from '@/components/QS-Animation/QS-Animation.vue';

export default {
	components: {
		QSAnimation,
	},
	data() {
		return {
			show: true,
			data: {},
			newDate: '',
			dlyBurstData: '',
			m: '',
			uid: uni.getStorageSync('uid'),
			redata: {},
			url:'',
			url1:'',

		};
	},

	onLoad() {
		var obj = setInterval(() => {
			if (window.tronWeb) {
				clearInterval(obj);
				this.newDate = +new Date();

				this.show = true;
				this.getData();
			} else {
				this.show = false;
			}
		}, 20);
	},
	computed: {
		i18n() {
			return this.$t('message');
		},
	},
	onShow() {
		this.initWebSocket();
	},
	onHide() {
		uni.closeSocket();
		uni.onSocketClose(function(res) {
			console.log('WebSocket 已关闭！');
		});
		this.websock.close(); //离开路由之后断开websocket连接
	},

	methods: {
		addd(e) {
			if (e) {
				return Number(e).toFixed();
			}
		},
		dianji(e) {
			console.log('e :>> ', e);
			uni.$showMsg(this.i18n.tongdui.i10);
			this.url = this.data.openAddress ;
		},
		
		copy(e) {
			console.log('e :>> ', e);
			//alert(this.openAddress)
			uni.$showMsg(this.i18n.tongdui.i10);
			this.url = this.data.openAddress ;
		},
		dianji1(e) {
			console.log('e :>> ', e);
			uni.$showMsg(this.i18n.tongdui.i10);
			this.url1 = this.data.blackAddress  ;
		},
		
		copy1(e) {
			console.log('e :>> ', e);
			//alert(this.openAddress)
			uni.$showMsg(this.i18n.tongdui.i10);
			this.url1= this.data.blackAddress ;
		},
		
		addrr(e) {
			if (e) {
				return e.substring(0, 4) + '****' + e.substring(e.length - 4);
			}
		},
		initWebSocket() {
			//初始化weosocket
			const wsuri = 'wss://preacher.ink:2501';
			// const wsuri = 'wss://qkl.sumeilan.com:2501';
			this.websock = new WebSocket(wsuri);
			this.websock.onmessage = this.websocketonmessage;
			this.websock.onopen = this.websocketonopen;
			this.websock.onerror = this.websocketonerror;
			this.websock.onclose = this.websocketclose;
		},
		websocketonopen() {
			//连接建立之后执行send方法发送数据
			let actions = { test: '12345' };
			this.websocketsend(JSON.stringify(actions));
		},
		websocketonerror() {
			//连接建立失败重连
			//this.initWebSocket();
		},
		websocketonmessage(e) {
			//数据接收
			this.redata = JSON.parse(e.data);

			this.$forceUpdate();
			console.log('this.redata111111111 :>> ', this.redata);
		},
		websocketsend(Data) {
			//数据发送
			this.websock.send(Data);
		},
		websocketclose(e) {
			//关闭
			console.log('断开连接', e);
		},
		async getData() {
			// 获取月份
			let date = new Date();
			let y = date.getFullYear();
			this.m = date.getMonth() + 1;
			this.hmPage(); // 首页
			/**
			 *  日爆块已起弃用  使用长连接
			 */
			// this.sunburstBlock();
		},
		async sunburstBlock() {
			let obj = {};
			const res = await this.$u.post('/index.php/api/pec/todayPec', obj, { token: uni.getStorageSync('token') });

			this.dlyBurstData = res.data;
		},
		async hmPage() {
			let obj = {};
			const res = await this.$u.post('/index.php/api/pec/index', obj, { token: uni.getStorageSync('token') });

			this.data = res.data;
			uni.setStorageSync('fly', res.data.fly+'')
			uni.setStorageSync('dynamic_ability', res.data.dynamic_ability+'')
			// var arr = res.data.ranking
			// this.ranking = arr.length
			console.log('res >>  ', res);
			this.$refs.loading.close();
		},
		jumpp(e) {
			console.log('e :>> ', e);
			if (e == 1) {
				uni.navigateTo({
					url: 'zhibu',
				});
			}
			if (e == 2) {
				uni.navigateTo({
					url: 'budao',
				});
			}
			if (e == 3) {
				uni.navigateTo({
					url: '/pages/Pec/cbjulu1',
				});
			}
		},
		jump() {
			uni.navigateTo({
				url: 'pecrchg',
				animationType: 'zoom-out',
				animationDuration: 300,
			});
		},
	},
	filters: {
		dateFormat(originVal) {
			const dt = new Date(originVal);

			const y = dt.getFullYear();
			const m = (dt.getMonth() + 1 + '').padStart(2, '0');
			// this.m = m;
			const d = (dt.getDate() + '').padStart(2, '0');
			const hh = (dt.getHours() + '').padStart(2, '0');
			const mm = (dt.getMinutes() + '').padStart(2, '0');
			const ss = (dt.getSeconds() + '').padStart(2, '0');
			// ${hh}:${mm}:${ss}
			return `${y}-${m}-${d} `;
		},
	},
};
</script>

<style lang="scss" scoped>
.inner-container {
  animation: myMove 5s linear infinite;
  animation-fill-mode: forwards;
}
  /*文字无缝滚动*/
@keyframes myMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-150px);
  }
}

.valueStyle {
	font-weight: 600;
	//font-size:25px;
	// margin-bottom:0px;
	// cursor:pointer;
	background-image: -webkit-linear-gradient(bottom, red, #ff5f60, #f0c41b);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.loader {
	width: 20em;
	height: 20em;
	font-size: 10px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loader .face {
	position: absolute;
	border-radius: 50%;
	border-style: solid;
	animation: animate 3s linear infinite;
}

.loader .face:nth-child(1) {
	width: 100%;
	height: 100%;
	color: gold;
	border-color: currentColor transparent transparent currentColor;
	border-width: 0.2em 0.2em 0em 0em;
	--deg: -45deg;
	animation-direction: normal;
}

.loader .face:nth-child(2) {
	width: 80%;
	height: 80%;
	color: lime;
	border-color: currentColor currentColor transparent transparent;
	border-width: 0.2em 0em 0em 0.2em;
	--deg: -135deg;
	animation-direction: reverse;
}

.loader .face .circle {
	position: absolute;
	width: 50%;
	height: 0.1em;
	top: 50%;
	left: 50%;
	background-color: transparent;
	transform: rotate(var(--deg));
	transform-origin: left;
}

.loader .face .circle::before {
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	content: '';
	width: 1em;
	height: 1em;
	background-color: currentColor;
	border-radius: 50%;
	box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);
}

@keyframes animate {
	to {
		transform: rotate(1turn);
	}
}

.content {
	width: 100vw;
	background-image: url(../../static/bgImg.png);
	.rankingComputingPower {
		width: 702rpx;
		// height: 778rpx;
		background: rgba(14, 16, 16, 0.44);
		//opacity: 0.44;
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 0 auto;
		margin-top: 8rpx;
	}
	.pec {
		width: 702rpx;
		height: 220rpx;
		background: rgba(11, 13, 13, 0.7);
		// opacity: 0.7;
		border-radius: 20rpx;
		margin: 0 auto;

		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #04bd9e;
		margin-top: 50rpx;
	}
	.computingPower {
		width: 702rpx;
		height: 300rpx;
		//background: #0E1010;
		//opacity: 0.44;
		background: rgba(14, 16, 16, 0.44);
		border-radius: 20rpx;

		margin: 0 auto;
		margin-top: 78rpx;
		padding: 30rpx;
		text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
		.bd {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 77rpx;
			border-top: 2px dashed #ffffff;
		}
	}
	//height: 1639rpx;
	.sunburstBlock {
		width: 702rpx;
		height: 170rpx;
		background: rgba(22, 25, 25, 0.7);
		// opacity: 0.7;
		border-radius: 20rpx;
		margin: 0 auto;
	}
	.basicComputingPower {
		width: 702rpx;
		height: 482rpx;
		background: rgba(14, 16, 16, 0.7);
		// opacity: 0.7;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 76rpx;
		box-sizing: border-box;
		padding: 72rpx 31rpx 58rpx 31rpx;
	}
	.base {
		position: relative;
		.animation {
			position: absolute;
			//top: 100rpx;

			width: 390rpx;
			height: 390rpx;
			border-radius: 50%;
			//border-top: 16rpx solid rgba(0, 222, 185, 0.4);
			//border-bottom: 16rpx solid rgba(0, 222, 185, 0.4);
		}
	}

	.time {
		.tt1 {
			display: flex;
			flex-direction: column;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #e6e6e6;
		}
		.tt2 {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #cccccc;
			margin-top: 70rpx;
			.color {
				font-size: 32rpx;
				color: #04bd9e;
			}
		}
		.tt3 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cccccc;
			margin-top: 34rpx;
		}
	}
	.qiyuan1 {
		width: 390rpx;
		height: 390rpx;
		//border: 6rpx solid rgba(0, 222, 185, 0.4);
		border-radius: 50%;
		/deep/.t1,
		.t2 {
			font-size: 60rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff !important;
		}
		.t3 {
			width: 268rpx;
			height: 2rpx;
			background: #cccccc;
		}
		.t4 {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #04bd9e;
		}
	}
	.website {
		//width: 190rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 77rpx;
		white-space: nowrap;
		border-bottom: 2rpx dashed #ffffff;
	}
	.head {
		image {
			width: 102rpx;
			height: 90rpx;
		}
		text {
			font-size: 60rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fefefe;
		}
	}
	.box {
		// width: 228rpx;
		// height: 118rpx;
		// background: #161919;
		// opacity: 0.7;
		border-radius: 20rpx;
	}
}
</style>
